<template>
  <div class="content-main">
    <CjszPlayer v-bind="setPlayer"/>
    <TinymceEditor :imagesUploadHandler="imagesUploadHandler"/>
    <BasicForm ref="formRef"
               @register="register"
               require-mark-placement="left"
               labelAlign="left"
               layout="false"
               @submit="handleSubmit"
               @reset="handleReset"
               style="margin:40px"
               submitButtonText="确定"
               resetButtonText="取消"
               :showActionButtonGroup="false">
      <template #imgSlot="{model, field  }">
        <img v-if="model[field]" :src="model[field]" :style="{width:'120px',height:'156px'}" alt="">
        <div class="default" :style="{width:'120px',height:'156px'}" v-else>
          <p>{{ '封面' }}</p>
        </div>
        <div class="operation">
          <p>{{ '支持jpg格式,最小尺寸120*156px' }}</p>
          <div class="button">
            <n-button type="primary" @click="localUpload()">本地上传</n-button>
          </div>
        </div>
      </template>
      <template #typeSlot="{ model, field }">
        <span>{{ !model[field] ? '原创' : '出版' }}</span>
      </template>
    </BasicForm>
  </div>
</template>

<script lang="ts" setup>
import {CjszPlayer} from "@cjsz/cjsz-player"
import {TinymceEditor} from "@cjsz/tinymce-editor-vue3"
import {useForm} from '@/components/Form/src/hooks/useForm';
import {useTabsViewStore} from '@/store/modules/tabsView';
import {upload} from "@/components/hUpload/upload-service";
import MinClient, {MinioPath} from "@/utils/minlo-client";
import MinioClient from "@cjsz/minio-client"
import {getMinIoConfig,imgSrcTurn} from "@cjsz/minio-client/dist/util"
const route = useRoute();
const router = useRouter();
const useTab = useTabsViewStore();
const formRef = ref(null)
const content = ref('')
const setPlayer = ref({
  width:800,
  download:true,
  cssFullscreen:false,
  url:"http://192.168.196.50:9000/default/szyun/video/NO3%20%E5%89%A7%E5%8F%B2%20%E8%B6%8A%E5%89%A7%E3%80%8A%E7%BA%A2%E6%A5%BC%E6%A2%A6%E3%80%8B%E5%A4%A9%E4%B8%8A%E6%8E%89%E4%B8%8B%E4%B8%AA%E6%9E%97%E5%A6%B9%E5%A6%B9%20%E5%BE%90%E7%8E%89%E5%85%B0.%E7%8E%8B%E6%96%87%E5%A8%9F%20.mp4?Content-Disposition=attachment%3B%20filename%3D%22szyun%2Fvideo%2FNO3%20%E5%89%A7%E5%8F%B2%20%E8%B6%8A%E5%89%A7%E3%80%8A%E7%BA%A2%E6%A5%BC%E6%A2%A6%E3%80%8B%E5%A4%A9%E4%B8%8A%E6%8E%89%E4%B8%8B%E4%B8%AA%E6%9E%97%E5%A6%B9%E5%A6%B9%20%E5%BE%90%E7%8E%89%E5%85%B0.%E7%8E%8B%E6%96%87%E5%A8%9F%20.mp4%22&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ggwh_minio%2F20220713%2F%2Fs3%2Faws4_request&X-Amz-Date=20220713T014124Z&X-Amz-Expires=432000&X-Amz-SignedHeaders=host&X-Amz-Signature=d6af77b583ee160c99ed0ef1872dc7bc9026171c053428f60f0a57416ce81024"
})
const schemas = [
  {
    field: 'cover',
    label: '封面',
    slot: 'imgSlot',
    rules: [{required: false}]
  },
  {
    field: 'resourceName',
    component: 'NInput',
    label: '书名',
    rules: [{required: true, message: '书名格式不正确', trigger: ['blur']}],
    componentProps: {
      placeholder: '请输入书名',
      maxlength: 50,
    },
  },
  {
    field: 'channel',
    component: 'NSelect',
    label: '频道',
    componentProps: {
      placeholder: '请选择频道',
      options: [
        {value: 1, label: '男频'},
        {value: 0, label: '女频'},
      ],
    },
  },
  {
    field: 'type',
    label: '类型',
    slot: 'typeSlot',
  }
];
const [register, {}] = useForm({
  gridProps: {cols: 3, xGap: 120, yGap: 30},
  labelWidth: 80,
  isFull: false,
  schemas: schemas || [],
});
console.log(getMinIoConfig('zfg4se52ty84uu16'));
const localUpload = ()=>{
  MinClient.selectFile({
    mode: "single",
  }).then((result: any) => {
    MinioClient.bigFileUpload(MinioPath.Image, result, (progress) => {
      console.log(progress);
    }).then((fileUrl: any) => {
      if (fileUrl) {
        unref(formRef).formModel.cover = fileUrl
      }
    });
  });
}
function handleSubmit(values: Recordable) {
  console.log(values);
}

function handleReset(values: Recordable) {
  useTab.closeCurrentTab(route);
  router.back();
}

onMounted(() => {
  //
})
const imagesUploadHandler = (blobInfo:any, progress:any) => new Promise((resolve,reject)=>{
              MinClient.bigFileUpload('image/', blobInfo.blob() ,(progress)=>{
          }).then((fileUrl) => {
            if (fileUrl) {
              console.log(fileUrl);
              resolve(imgSrcTurn(fileUrl as string))
            }else{
              reject('上传出错')
            }
          }).catch(()=>{
            reject('上传出错')
          });
        })
</script>

<style scoped lang="scss">

.default {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background-color: #f2f8f9;
  border: 1px #f2f2f2 solid;

  p {
    width: 20px;
    line-height: 30px;
    color: #bbbbbb;
    font-size: 13px;
  }
}

.operation {
  margin-left: 10px;
  align-self: flex-end;

  p {
    color: #bbbbbb;
    font-size: 13px;
  }

  .button {
    margin-top: 20px;
    margin-left: 40px;
    .upload {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      letter-spacing: 2px
    }

    .select {
      border: 1px solid #00AEEF;
      color: #00AEEF;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      letter-spacing: 2px
    }
  }
}
</style>
